﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Transcript.aspx.cs" Inherits="HTML5Video.Video.Transcript" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        #div_content {
            width: 495px;
            height: 480px;
            padding: 10px 30px;
            font-family: Segoe UI,Arial,Verdana,Tahoma,sans-serif;
        }

        .title {
            height: 20px;
            height: 25px;
        }

        .chapter {
            height: 30px;
        }

        .d_title1 {
            float: left;
            width: 80%;
            height: 25px;
        }

        .d_title2 {
            float: right;
            width: 25px;
            text-align: right;
        }

            .d_title2 a {
                background-image: url(Download.PNG);
                display: block;
                width: 25px;
                height: 25px;
            }

        .d_chapter1 {
            float: left;
            width: 25px;
            height: 20px;
        }

        .d_chapter2 {
            float: left;
            width: 200px;
            border: 1px solid black;
            height: 20px;
        }

        .d_content {
            width: 100%;
            height: 250px;
            overflow-x: hidden;
            overflow-y: scroll;
        }

        .d_c_list {
            font-size: 12px;
            display: none;
            position: absolute;
            left: 63px;
            top: 68px;
            width: 300px;
            height: 100px;
            overflow-x: hidden;
            overflow-y: scroll;
            z-index: 100;
            border: 1px solid #c5cacd;
            background-color: white;
            border-radius: 4px;
        }
    </style>
    <script src="../Resource/jquery-1.8.0.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="div_content">
        </div>
        <input type="button" id="btn1" value="index" />
    </form>
</body>
</html>
<script type="text/javascript">
    document.getElementById("btn1").onclick = function () {

    }
    var chapterControl = function (container, data) {
        //data = { content: [{ Chaptertitle: "<b>abc<b>", Chaptercontent: "<b>aaaaaaaaaaaa</b>", Time: "12" }, { Chaptertitle: "zxc", Chaptercontent: "<b>sssssssssss</b>", Time: "20" }, { Chaptertitle: "qwe", Chaptercontent: "<b>qweeeeee</b>", time: "30" }], url: "http://www.baidu.com" };

        if (data == null || data.length == 0) {
            return;
        }

        this.choose_result = 1;
        this.choose_index = 0;

        this.title = $("<div tag='div_title' class='title'><div class='d_title1'>Transcript</div><div class='d_title2'><a></a></div></div>");
        this.chapter = $("<div tag='div_chapter' class='chapter'><div title='Chapter List' tag='chapter_list' class='d_chapter1'><img src='Search.png' /></div><div tag='chapterTitle' class='d_chapter2'></div><div tag='chapter_content' class='d_c_list'></div>");
        this.content = $("<div tag='div_chapter_content' class='d_content'></div>");

        this.init = function () {
            $(container).append(this.title);
            $(container).append(this.chapter);
            $(container).append(this.content);
            this.SetDownloadLink();
            this.SetChapterList();
            this.SetChapterContent();
        }

        this.SetDownloadLink = function () {
            this.title.find("a").attr("href", data.url);
        }

        this.SetChapterList = function () {
            var that = this;
            this.chapter.find("div[tag=chapter_list]").click(function () {
                var dshow = that.chapter.find("div[tag=chapter_content]");
                if (dshow.css("display") == "none") {
                    that.CreateChapterList();

                    that.chapter.find("div[tag=div_clist]").each(function (i) {
                        $(this).mousemove(function () {
                            $(this).css("background-color", "skyblue");
                        }).mouseout(function () {
                            $(this).css("background-color", "white");
                        }).click(function () {
                            that.chapter.find("div[tag=chapterTitle]").html(data.content[i].Chaptertitle);
                            that.content.html(data.content[i].Chaptercontent);
                            dshow.css("display", "none");

                            that.choose_result = $(this).attr("time");
                            that.choose_index = $(this).attr("index");
                        })
                    })

                    dshow.css("display", "block");
                    return;
                }
                else {
                    dshow.css("display", "none");
                    return;
                }
            })
            //set default chapter value
            this.chapter.find("div[tag=chapterTitle]").html(data.content[0].Chaptertitle);
        }

        this.SetChapterContent = function () {
            this.content.html(data.content[0].Chaptercontent);
        }

        this.CreateChapterList = function () {
            var _cdl = this.chapter.find("div[tag=chapter_content]");
            if (_cdl.html() != "") {
                return;
            }
            for (var i = 0; i < data.content.length; i++) {
                var tempd = $("<div tag='div_clist' index='" + data.content[i].Index + "' time='" + data.content[i].Time + "'>" + data.content[i].Chaptertitle + "</div>");
                _cdl.append(tempd);
            }
        }

        this.GetVideoTime = function () {
            return this.choose_result;
        }

        this.GetVideoIndex = function () {
            return this.choose_index;
        }

        this.setPosition = function (index) {
            this.chapter.find("div[tag=chapterTitle]").html(data.content[index].Chaptertitle);
            this.content.html(data.content[index].Chaptercontent);
            this.choose_index = index;
        }
    }

    function SendAjax(reqtype, requrl, reqdata, datatype, callback) {
        $.ajax({
            type: reqtype,
            async: true,
            url: requrl,
            dataType: datatype == "" ? "text" : datatype,
            data: reqdata,
            cache: false,
            success: callback,
            error: function (jqXHR, textStatus, errorThrown) {
                alert("HTTP请求错误代码:" + jqXHR.status + ",描述:" + jqXHR.statusText);
            }

        });
    }

    SendAjax("get", "DataPage.aspx", { tag: "getdata" }, "", function (data) {
        data = eval('(' + data + ')');
        var c = new chapterControl($("#div_content"), data);
        c.init();
        $("#btn1").click(function () {
            c.setPosition(3);
        })
    });

    
</script>
